<template>
    <view class="editCommunity">
        <view class="search">
            <u-search placeholder="请输入小区名字..." bgColor="#F8F8FA" :showAction="false" fontSize="24rpx"
                searchIconSize="20" color="#B1B1B1" placeholderColor="#B1B1B1" shape="square"></u-search>
        </view>
        <UserLabel v-for="(item, index) in followUserList" :key="index" :item="item" radius="50" handle="操作"
            @clickView="viewPersonnel">
        </UserLabel>
        <u-popup :show="state.showPopup" mode="bottom" :round="10" @close="state.showPopup = false"
            @open="viewPersonnel">
            <view class="upopup">
                <view class="item" v-for="(item, index) in handlePopupList" @click="clickPopup(index)" :key="index">
                    <text>{{ item.name }}</text>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script lang="ts" setup>

import { ref } from 'vue';
import UserLabel from '../components/UserLabel/index.vue';
import { handleNavigateTo } from '@/plugins/uniApp'


const followUserList = ([
    { name: '读你', signature: '雨夜无眠' },
    { name: '读你', signature: '雨夜无眠' }
])
const handlePopupList = ([
    { name: '禁言/解封' },
    { name: '封号/解封', },
    { name: '删除违规帖子', url: '../illegalDynamic/index' },
    { name: '取消' }
])
const state = ref({
    showPopup: false
})
const viewPersonnel = () => {
    state.value.showPopup = true
    console.log('state.showPopup :>> ', state.value.showPopup);
}

const clickPopup = (index: number) => {
    if (index == 2) {
        handleNavigateTo(handlePopupList[index].url || '')
    } else if (index == 3) {
        state.value.showPopup = false
    }
}
</script>

<style lang="scss" scoped>
.editCommunity {
    padding: 20rpx;

    .upopup {
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 0 30rpx;

        .item {
            font-size: 38rpx;
            padding: 30rpx 0;
            border-bottom: 1rpx solid #EFEFEF;
        }

        .item:last-child {
            border: none;
            padding: 60rpx 0;
        }
    }
}
</style>